<template>
  <div class="export-warm-tips no-overflow">
      <div class="header">
          <h2>温馨提示</h2>
      </div>
      <div class="body">
          <h3 v-if="data.length > 0">当前有医废尚未确认，需要先确认医废，再使用导出功能。</h3>
          <h3 v-else>
              <span>当前医废已经全部确认，</span>
              <p>是否继续导出 {{day}} 的数据？ </p>
          </h3>
      </div>
      <div class="footer">
          <button class="close-btn" @click="handleClose">{{data.length > 0 ? '关闭' : '关闭并重新选择'}}</button>
          <button class="go-btn" v-if="data.length > 0" @click="handleJump">
              <span>立即前往</span>
              <img src="/static/doctor-img/arrow.png" alt="">
          </button>
          <template v-else>
            <slot></slot>
          </template>
      </div>
  </div>
</template>

<script>
import ExportBtn from './export-btn';

export default {
  props: {
    data:{
      type: Array,
      default: () => []
    },
    day: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      
    }
  },
  components:{
    ExportBtn
  },
  methods:{
    handleJump(){
      this.$emit('handle-jump')
    },
    handleClose(){
      this.$emit('handle-close')
    }
  }
}
</script>

<style lang="less">

.export-warm-tips{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: auto;
  z-index: 2002;
  margin-top: 30vh !important;
  background: #fff;
  // width: 50%;
  // height: 400px;
  width: 500px;
  height: fit-content;
  margin: 0 auto;
  border-radius: 5px;
  padding: 20px 10px;
  &.no-overflow {
      overflow: inherit;
  }
  .header{
      text-align: center;
      font-size: 22px;
      color: #646464;
  }
  .body{
      margin: 20px 40px;
      text-align: center;
      font-size: 16px;
      h3{
          font-weight: bold;
      }
  }
  .footer{
      text-align: center;
      button{
          border: 1px solid #fff;
          padding: 8px 15px;
          font-size: 18px;
          border-radius: 5px;
          // width: 150px;
          color: #fff;
          outline: 0;
      }
      .close-btn{
          width: 35%;
          color: #7D7D7D;
          background: #C0C0C0;
          vertical-align: middle;
      }
      .go-btn{
          width: 35%;
          background: #FE7200;
          padding: 6px 15px;
          vertical-align: middle;
          span{
              display: inline-block;
              vertical-align: middle;
          }
          img{
              width: 28px;
              vertical-align: middle;
              margin-left: 5px;
          }
      }
      .export-btn{
          width: 35%;
          display: inline-block;
          vertical-align: middle;
          button{
              width: 100%;
              padding: 11px 25px;
              background: #22A300;
          }
      }
  }
}
</style>